<template>
  <div class="line">
    <el-container style="width: 100%">
      <el-header style="width: 100%;margin-left: -1%">
        <el-menu
          style="width: 1902px;height: 80px"
          @select="handleSelect"
          default-active="0"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <div class="line1">风起书城</div>
          <el-menu-item index="20" style="margin-left: 30%;margin-top: -1.5%;">首页</el-menu-item>
          <el-submenu index="21" style="margin-top: -1.5%;">
            <template slot="title">分类</template>
            <el-menu-item index="1">历史</el-menu-item>
            <el-menu-item index="2">小说</el-menu-item>
            <el-menu-item index="3">地理</el-menu-item>
            <el-menu-item index="4">传记</el-menu-item>
            <el-menu-item index="5">哲学</el-menu-item>
            <el-menu-item index="6">社会学</el-menu-item>
            <el-menu-item index="7">艺术</el-menu-item>
            <el-menu-item index="8">政治</el-menu-item>
            <el-menu-item index="9">建筑</el-menu-item>
            <el-menu-item index="10">戏剧</el-menu-item>
            <el-menu-item index="11">音乐</el-menu-item>
            <el-menu-item index="12">军事</el-menu-item>
            <el-menu-item index="13">数学</el-menu-item>
            <el-menu-item index="14">美术</el-menu-item>
            <el-menu-item index="15">设计</el-menu-item>
            <el-menu-item index="16">佛教</el-menu-item>
          </el-submenu>
          <div class="line2">
            <el-input
              @keyup.enter.native="searchClick"
              placeholder="通过书名或作者搜索..."
              prefix-icon="el-icon-search"
              size="small"
              style="width: 400px;margin-top: -7%"
              v-model="keywords">
            </el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </div>
          <div class="line5">
            <a href="/login" style="color: #fdfdfd;text-decoration-line: none;font-size: 15px;font-weight: bold;">登录</a>
            <a href="/register" style="color: #fdfdfd;text-decoration-line: none;font-size: 15px;font-weight: bold;margin-left: 10%">注册</a>
            <a href="/login" style="color: #fdfdfd;text-decoration-line: none;font-size: 15px;font-weight: bold;margin-left: 10%">管理员入口</a>
          </div>
        </el-menu>
      </el-header>
      <el-main style="margin-top: 0%">
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    provide() {
      return {
        reload: this.reload,
      }
    },
    data () {
      return {
        keywords: '',
        cid:'',
        index:'',
        isRouterAlive : true
      }
    },
    methods: {
      searchClick(){
        if(this.cid==20)
          this.cid=0;
        this.$router.push({path: '/book', query: {index: this.keywords}});
        this.reload();
      },
      handleSelect(key) {
        if (key == 20) {
          this.cid = 0;
          this.$router.push('/carousel');
        } else {
          this.cid = key;
          this.$router.push({path: '/book', query: {index: this.cid}});
          this.reload();
        }
      },
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      }

    }
  }
</script>

<style scoped>
  .line{
    width: 1902px;
    margin-top: -55px;
    margin-left: -6.5px;
    margin-right: -6px;
    outline: none;
  }
  .line1{
    width:120px;
    height: 20px;
    font-size: 30px;
    font-weight: bold;
    margin-top: 1%;
    margin-left: 20%;
    color: #e5e5e5;
    outline: none;
  }
  .line2{
    width:auto;
    height: 5px;
    font-size: larger;
    margin-top: -0.7%;
    color: #e5e5e5;
    outline: none;
  }
  .line4{
    width: 20px;
    height: auto;
    margin-top: -0.5%;
    margin-left: 85%;
    outline: none;
  }
  .line5{
    width: 260px;
    height: 20px;
    margin-top: 0%;
    margin-left: 85%;
    color: #e5e5e5;
    outline: none;
  }
</style>
